import React from 'react';
import {Form, Input, Select} from 'antd'
import { v4 as uuidv4 } from 'uuid';
/*
添加列表的form组件
 */
const AddModal =(props)=> {
    let title='一级分类'
    const handleChange = (value: string) => {
        console.log(value,'fff')
        if(value==='0')return;
        if(value!=='0'){
            const list=props.category.filter((item)=>value==item._id)
            title=list[0].title
        }
    };
    const onValuesChange =(value)=>{
        value.parentId='0'
        value.id=props.category.length+1
        value._id=uuidv4()

        //将form对象通过setForm
        props.setForm(value)
    }
        return (
            <div>
                <Form
                    name="basic"
                    labelCol={{span: 8,}}
                    wrapperCol={{span: 16,}}
                    style={{maxWidth: 600,}}
                    initialValues={{remember: true,}}
                    autoComplete="off"
                    onValuesChange={onValuesChange}
                >
                    <Form.Item
                        label="所属分类"
                        name="parentId"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Select
                            defaultValue={props.parentName?props.parentName:'0'}
                            onChange={handleChange}
                            >
                            <Select.Option value="0">一级分类</Select.Option>
                            {props.category.map((item)=>{
                                return(
                                    <Select.Option value={item._id} key={item._id}>{item.title}</Select.Option>
                                    )
                            })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="分类名称"
                        name="title"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input placeholder="请输入分类名称"/>
                    </Form.Item>
                </Form>
            </div>
        );
}

export default AddModal;